<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户管理网页</title>
  <script src="/js/vue.js"></script>
  <!-- element-ui引入样式 展示数据的-->
  <link rel="stylesheet" href="/css/index.css">
  <!-- element-ui引入组件库 -->
  <script src="/js/index.js"></script>
  <!--引入axios库  从后端获取数据-->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
  <el-table
          :data="tableData"
          style="width: 100%">

    <el-table-column
            type="index"
            width="80">
    </el-table-column>

    <el-table-column
            prop="objcode"
            label="景点名称"
            width="180">
    </el-table-column>
    <el-table-column
            prop="objname"
            label="景区介绍"
            width="220">
    </el-table-column>
    <el-table-column
            prop="favtime"
            label="收藏时间">
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="300px">
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="reserve(scope.$index, scope.row)">去看看
        </el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">取消收藏
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--    分页查询-->
  <el-pagination
          style="width: 100%;margin-top: 20px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        checkUser: {}//用户
      }
    },
    created: function () {//页面初始化时,需要执行的业务可以放入该方法
      this.getUser();
    },
    methods: {//存放所有使用的方法
      loadData() {
        let a={
          "pageNo": this.currentPage, "pageSize": this.pageSize,
          "data":{'favrid':this.checkUser.id}
        }
        let _this = this;
        //使用axios向后台发请求
        axios.post('/ptfavorite/page',a
        )
                .then(function (response) {
                  if (response.data.code == 200) {
                    _this.tableData=response.data.data.list;
                    _this.total = response.data.data.total;
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
      },
      //判断用户
      getUser() {
        let _this = this
        axios.get('/tuser/tick')
                .then(function (response) {
                  if (response.data.code == 200) {
                    //初始化信息
                    _this.checkUser = response.data.data
                    _this.loadData()
                  } else {
                    alert("请登录")
                    setTimeout(function () {
                      top.location.href = "/html/login.html"
                    }, 1000); // 定时时间
                  }
                }).catch(function (error) {
          console.log(error);
        });
      },
      handleDelete(index, row) {
        let _this = this
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete("/ptfavorite/" + row.id)
                  .then(function (response) {
                    _this.loadData()
                  })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      reserve(index, row) {
        top.location.href = "/html/front/yuding/yuding.html?id="+row.objid;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.loadData();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.loadData();
      },
    }
  })
</script>
</body>
</html>